<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>需求统计卡片设计方案</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            max-width: 414px;
            margin: 0 auto;
            background: #f5f5f5;
            padding: 20px;
        }
        .design-section {
            margin-bottom: 40px;
            background: white;
            border-radius: 12px;
            padding: 20px;
        }
        .design-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #1f2937;
        }
        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            line-height: 1.2;
        }
        .clickable {
            transition: all 0.2s ease;
            cursor: pointer;
        }
        .clickable:active {
            transform: scale(0.98);
        }
    </style>
</head>
<body>
    <h1 class="text-2xl font-bold mb-6 text-center">需求统计卡片设计方案</h1>

    <!-- 方案1：渐变背景卡片 -->
    <div class="design-section">
        <div class="design-title">方案1：渐变背景卡片（推荐）</div>
               <div class="grid grid-cols-3 gap-3">
            <!-- 待处理 -->
            <div class="rounded-xl p-4 text-center clickable bg-gradient-to-br from-amber-50 to-amber-100 border border-amber-200" onclick="alert('待处理')">
                <div class="w-10 h-10 bg-amber-500 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-clock text-white text-sm"></i>
                </div>
                <div class="text-amber-700 stat-number mb-1">5</div>
                <div class="text-amber-600 text-xs font-medium">待处理</div>
            </div>
            <!-- 进行中 -->
            <div class="rounded-xl p-4 text-center clickable bg-gradient-to-br from-indigo-50 to-indigo-100 border border-indigo-200" onclick="alert('进行中')">
                <div class="w-10 h-10 bg-indigo-500 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-spinner text-white text-sm"></i>
                </div>
                <div class="text-indigo-700 stat-number mb-1">8</div>
                <div class="text-indigo-600 text-xs font-medium">进行中</div>
            </div>
            <!-- 已完成 -->
            <div class="rounded-xl p-4 text-center clickable bg-gradient-to-br from-emerald-50 to-emerald-100 border border-emerald-200" onclick="alert('已完成')">
                <div class="w-10 h-10 bg-emerald-500 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-check-circle text-white text-sm"></i>
                </div>
                <div class="text-emerald-700 stat-number mb-1">12</div>
                <div class="text-emerald-600 text-xs font-medium">已完成</div>
            </div>
        </div>
        <p class="text-xs text-gray-500 mt-3">优点：视觉层次丰富，图标+渐变背景，识别度高</p>
    </div>

    <!-- 方案2：大卡片设计 -->
    <div class="design-section">
        <div class="design-title">方案2：大卡片设计（更突出）</div>
        <div class="space-y-3">
            <!-- 待处理 -->
            <div class="rounded-xl p-4 clickable bg-gradient-to-r from-amber-400 to-amber-500 text-white" onclick="alert('待处理')">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                            <i class="fas fa-clock text-2xl"></i>
                        </div>
                        <div>
                            <div class="text-white text-opacity-80 text-xs mb-1">待处理需求</div>
                            <div class="text-3xl font-bold">5</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-white text-opacity-60"></i>
                </div>
            </div>
            <!-- 进行中 -->
            <div class="rounded-xl p-4 clickable bg-gradient-to-r from-indigo-500 to-indigo-600 text-white" onclick="alert('进行中')">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                            <i class="fas fa-spinner text-2xl"></i>
                        </div>
                        <div>
                            <div class="text-white text-opacity-80 text-xs mb-1">进行中需求</div>
                            <div class="text-3xl font-bold">8</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-white text-opacity-60"></i>
                </div>
            </div>
            <!-- 已完成 -->
            <div class="rounded-xl p-4 clickable bg-gradient-to-r from-emerald-500 to-emerald-600 text-white" onclick="alert('已完成')">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                            <i class="fas fa-check-circle text-2xl"></i>
                        </div>
                        <div>
                            <div class="text-white text-opacity-80 text-xs mb-1">已完成需求</div>
                            <div class="text-3xl font-bold">12</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-white text-opacity-60"></i>
                </div>
            </div>
        </div>
        <p class="text-xs text-gray-500 mt-3">优点：信息更丰富，视觉冲击力强，适合需要展示更多信息的场景</p>
    </div>

    <!-- 方案3：图标+数字组合（简洁版） -->
    <div class="design-section">
        <div class="design-title">方案3：图标+数字组合（简洁版）</div>
        <div class="grid grid-cols-3 gap-3">
            <!-- 待处理 -->
            <div class="rounded-xl p-4 text-center clickable bg-white border-2 border-amber-200 hover:border-amber-400 transition" onclick="alert('待处理')">
                <i class="fas fa-clock text-amber-500 text-2xl mb-2"></i>
                <div class="text-amber-600 stat-number mb-1">5</div>
                <div class="text-gray-600 text-xs font-medium">待处理</div>
            </div>
            <!-- 进行中 -->
            <div class="rounded-xl p-4 text-center clickable bg-white border-2 border-indigo-200 hover:border-indigo-400 transition" onclick="alert('进行中')">
                <i class="fas fa-spinner text-indigo-500 text-2xl mb-2"></i>
                <div class="text-indigo-600 stat-number mb-1">8</div>
                <div class="text-gray-600 text-xs font-medium">进行中</div>
            </div>
            <!-- 已完成 -->
            <div class="rounded-xl p-4 text-center clickable bg-white border-2 border-emerald-200 hover:border-emerald-400 transition" onclick="alert('已完成')">
                <i class="fas fa-check-circle text-emerald-500 text-2xl mb-2"></i>
                <div class="text-emerald-600 stat-number mb-1">12</div>
                <div class="text-gray-600 text-xs font-medium">已完成</div>
            </div>
        </div>
        <p class="text-xs text-gray-500 mt-3">优点：简洁清爽，白色背景+彩色边框，视觉干净</p>
    </div>

    <!-- 方案4：带背景图案的卡片 -->
    <div class="design-section">
        <div class="design-title">方案4：带背景图案的卡片</div>
        <div class="grid grid-cols-3 gap-3">
            <!-- 待处理 -->
            <div class="rounded-xl p-4 text-center clickable relative overflow-hidden bg-amber-50 border border-amber-200" onclick="alert('待处理')">
                <div class="absolute top-0 right-0 w-16 h-16 bg-amber-200 rounded-full -mr-8 -mt-8 opacity-30"></div>
                <div class="relative z-10">
                    <i class="fas fa-clock text-amber-500 text-xl mb-2"></i>
                    <div class="text-amber-700 stat-number mb-1">5</div>
                    <div class="text-amber-600 text-xs font-medium">待处理</div>
                </div>
            </div>
            <!-- 进行中 -->
            <div class="rounded-xl p-4 text-center clickable relative overflow-hidden bg-indigo-50 border border-indigo-200" onclick="alert('进行中')">
                <div class="absolute top-0 right-0 w-16 h-16 bg-indigo-200 rounded-full -mr-8 -mt-8 opacity-30"></div>
                <div class="relative z-10">
                    <i class="fas fa-spinner text-indigo-500 text-xl mb-2"></i>
                    <div class="text-indigo-700 stat-number mb-1">8</div>
                    <div class="text-indigo-600 text-xs font-medium">进行中</div>
                </div>
            </div>
            <!-- 已完成 -->
            <div class="rounded-xl p-4 text-center clickable relative overflow-hidden bg-emerald-50 border border-emerald-200" onclick="alert('已完成')">
                <div class="absolute top-0 right-0 w-16 h-16 bg-emerald-200 rounded-full -mr-8 -mt-8 opacity-30"></div>
                <div class="relative z-10">
                    <i class="fas fa-check-circle text-emerald-500 text-xl mb-2"></i>
                    <div class="text-emerald-700 stat-number mb-1">12</div>
                    <div class="text-emerald-600 text-xs font-medium">已完成</div>
                </div>
            </div>
        </div>
        <p class="text-xs text-gray-500 mt-3">优点：有设计感，背景图案增加视觉层次，不会太单调</p>
    </div>

    <!-- 方案5：扁平化设计 -->
    <div class="design-section">
        <div class="design-title">方案5：扁平化设计（现代感）</div>
        <div class="grid grid-cols-3 gap-3">
            <!-- 待处理 -->
            <div class="rounded-xl p-4 text-center clickable bg-amber-500 text-white shadow-md hover:shadow-lg transition" onclick="alert('待处理')">
                <i class="fas fa-clock text-2xl mb-2 opacity-90"></i>
                <div class="text-3xl font-bold mb-1">5</div>
                <div class="text-xs font-medium opacity-90">待处理</div>
            </div>
            <!-- 进行中 -->
            <div class="rounded-xl p-4 text-center clickable bg-indigo-500 text-white shadow-md hover:shadow-lg transition" onclick="alert('进行中')">
                <i class="fas fa-spinner text-2xl mb-2 opacity-90"></i>
                <div class="text-3xl font-bold mb-1">8</div>
                <div class="text-xs font-medium opacity-90">进行中</div>
            </div>
            <!-- 已完成 -->
            <div class="rounded-xl p-4 text-center clickable bg-emerald-500 text-white shadow-md hover:shadow-lg transition" onclick="alert('已完成')">
                <i class="fas fa-check-circle text-2xl mb-2 opacity-90"></i>
                <div class="text-3xl font-bold mb-1">12</div>
                <div class="text-xs font-medium opacity-90">已完成</div>
            </div>
        </div>
        <p class="text-xs text-gray-500 mt-3">优点：现代感强，色彩鲜明，对比度高，信息清晰</p>
    </div>

    <!-- 方案6：混合设计（推荐用于首页） -->
    <div class="design-section">
        <div class="design-title">方案6：混合设计（推荐用于首页）</div>
        <div class="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-xl p-4 mb-3">
            <div class="text-sm text-gray-600 mb-3 font-medium">需求总览</div>
            <div class="grid grid-cols-3 gap-3">
                <!-- 待处理 -->
                <div class="bg-white rounded-lg p-3 text-center clickable shadow-sm" onclick="alert('待处理')">
                    <div class="text-amber-600 text-2xl font-bold mb-1">5</div>
                    <div class="text-gray-600 text-xs">待处理</div>
                </div>
                <!-- 进行中 -->
                <div class="bg-white rounded-lg p-3 text-center clickable shadow-sm" onclick="alert('进行中')">
                    <div class="text-indigo-600 text-2xl font-bold mb-1">8</div>
                    <div class="text-gray-600 text-xs">进行中</div>
                </div>
                <!-- 已完成 -->
                <div class="bg-white rounded-lg p-3 text-center clickable shadow-sm" onclick="alert('已完成')">
                    <div class="text-emerald-600 text-2xl font-bold mb-1">12</div>
                    <div class="text-gray-600 text-xs">已完成</div>
                </div>
            </div>
        </div>
        <p class="text-xs text-gray-500 mt-3">优点：整体感强，有容器包裹，视觉统一，适合作为首页主要模块</p>
    </div>

    <div class="mt-8 p-4 bg-blue-50 rounded-xl">
        <h3 class="font-bold mb-2">设计建议：</h3>
        <ul class="text-sm text-gray-700 space-y-1">
            <li>• <strong>方案1（渐变背景卡片）</strong>：平衡美观和实用性，推荐使用</li>
            <li>• <strong>方案6（混合设计）</strong>：适合作为首页主要模块，整体感强</li>
            <li>• <strong>方案2（大卡片）</strong>：如果空间充足，需要展示更多信息时使用</li>
            <li>• <strong>方案5（扁平化）</strong>：如果追求现代感和高对比度</li>
        </ul>
    </div>
</body>
</html>

